<template>
  <AcceptHandleHeadComponent
    ref="acceptHandleHeadRef"
    :ucolumns="ucolumns"
    :needDealNum="needDealNum"
    :type="LableTitle.correctPerson"
    :needMoreQuery="true"
    :showCaseNoQuery="false"
    @myEvent="myEvent"
    @setColumns="setColumns"
    @onSearch="onSearch"
    @onReset="reQuery"
  >
    <div slot="headLeft">
      <a-form-item style="display: flex; margin-bottom: 0px">
        <a-input v-model="queryParam.f_name" placeholder="请输入姓名" allowClear style="height: 40px" />
      </a-form-item>
    </div>

    <div slot="headRight" style="margin-right: 30px">
      <a-button type="primary" style="margin-left: 12px" class="btn_primary_color" @click="addPerson"
        >新增社矫对象</a-button
      >
      <a-button class="btn_normal_color" style="margin-left: 12px" icon="download" @click="exportTemplate"
        >导出模板</a-button
      >
      <a-upload
        style="margin-left: 12px"
        accept=".xls,.xlsx"
        :customRequest="(file) => uploadFile(file)"
        :before-upload="(file) => beforeUpload(file)"
        :show-upload-list="false"
        name="file"
        :multiple="false"
      >
        <a-button class="btn_normal_color"> <a-icon type="upload" /> 导入社矫对象 </a-button>
      </a-upload>
      <a-button class="btn_normal_color" style="margin-left: 12px" icon="download" @click="exportExcel"
        >导出社矫对象</a-button
      >
    </div>

    <!-- 其他查询条件 -->
    <div slot="more">
      <a-form layout="inline" class="accept_more_operate_moreForm">
        <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
          <a-collapse-panel :show-arrow="false" disabled key="1" style="font-weight: bold">
            <div slot="header" class="accept_more_operate_moreForm_collapse_head">
              <a-row :gutter="48" style="width: 100%">
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="罪名：">
                    <a-input v-model="queryParam.f_crime" placeholder="请输入罪名" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="身份证号：">
                    <a-input v-model="queryParam.f_cardnoindex" placeholder="请输入身份证号后四位" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="是否重点人员">
                    <a-select
                      v-model="queryParam.f_focus"
                      style="width: 180px; font-weight: normal"
                      placeholder="请选择是否重点人员"
                      allowClear
                    >
                      <a-select-option :key="YesNoValue.YES" :value="YesNoValue.YES"> 是 </a-select-option>
                      <a-select-option :key="YesNoValue.NO" :value="YesNoValue.NO"> 否 </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
            <a-row :gutter="48" style="width: 100%" class="accept_more_operate_moreForm_collapse_body">
              <a-col @click.stop="() => {}" :md="8" :sm="24">
                <a-form-item label="性别：">
                  <a-select
                    v-model="queryParam.f_gender"
                    style="width: 220px; font-weight: normal"
                    placeholder="请选择性别"
                    allowClear
                  >
                    <a-select-option v-for="gender in Tp_genderList" :key="gender.value" :value="gender.value">
                      {{ gender.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col @click.stop="() => {}" :md="8" :sm="24">
                <a-form-item label="矫正类型：">
                  <a-select
                    v-model="queryParam.f_crctype"
                    style="width: 220px; font-weight: normal"
                    placeholder="请选择矫正类型"
                    allowClear
                  >
                    <a-select-option v-for="crcType in Tp_crc_userList" :key="crcType.value" :value="crcType.value">
                      {{ crcType.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col @click.stop="() => {}" :md="8" :sm="24">
                <a-form-item label="司法所">
                  <a-select
                    v-model="queryParam.f_deptid"
                    style="width: 220px; font-weight: normal"
                    placeholder="请选择司法所"
                    allowClear
                  >
                    <a-select-option v-for="departInfo in lawDeparts" :key="departInfo.id" :value="departInfo.id">
                      {{ departInfo.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row
              :gutter="48"
              style="width: 100%; margin-top: 20px"
              class="accept_more_operate_moreForm_collapse_body"
            >
              <a-col @click.stop="() => {}" :md="12" :sm="24">
                <a-form-item label="社矫开始时间" style="width: 100%">
                  <a-date-picker
                    v-model="queryParam.f_startdate"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="开始日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="subtimeListen()"
                  />
                  ~
                  <a-date-picker
                    v-model="queryParam.f_startdate_01"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="结束日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="subtimeListen()"
                  />
                </a-form-item>
              </a-col>
              <a-col @click.stop="() => {}" :md="12" :sm="24">
                <a-form-item label="社矫结束时间" style="width: 100%">
                  <a-date-picker
                    v-model="queryParam.f_enddate"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="开始日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="subtimeListen()"
                  />
                  ~
                  <a-date-picker
                    v-model="queryParam.f_enddate_01"
                    :style="{ width: 'calc(50% - 12px)' }"
                    placeholder="结束日期"
                    format="YYYY-MM-DD"
                    allowClear
                    @change="subtimeListen()"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form>
    </div>

    <template slot="content">
      <!-- 表格数据 -->
      <a-table
        :scroll="scroll"
        :columns="ucolumns"
        :data-source="listData"
        :pagination="upagination"
        :loading="loading"
        rowKey="cardno"
        @change="tableChange"
        size="middle"
        :bordered="ubordered"
        :rowClassName="rowClassName"
        :components="header"
        ref="table"
        :key="tableCountKey"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
        </span>

        <div slot="genderSlot" slot-scope="gender" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ genderLabel(gender) }}</span>
            </template>
            {{ genderLabel(gender) }}
          </a-tooltip>
        </div>

        <div slot="crctypeSlot" slot-scope="crctype" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ crctypeLabel(crctype) }}</span>
            </template>
            {{ crctypeLabel(crctype) }}
          </a-tooltip>
        </div>

        <div slot="controltypeSlot" slot-scope="controltype" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ controltypeLabel(controltype) }}</span>
            </template>
            {{ controltypeLabel(controltype) }}
          </a-tooltip>
        </div>

        <div slot="nameSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
          <a-popover v-if="record.avatarUrl">
            <template slot="content">
              <a-avatar :size="80" v-if="record.avatarUrl" :src="record.avatarUrl" />
            </template>
            {{ record.name }}
          </a-popover>
          <span v-else>
            {{ record.name }}
          </span>
        </div>

        <div slot="crimeSlot" slot-scope="crime" class="beyond_hiding" style="width: 100%; text-align: left">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ crime }}</span>
            </template>
            {{ crime }}
          </a-tooltip>
        </div>

        <div slot="focusSlot" slot-scope="focus" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ focus == 3200 ? '是' : '否' }}</span>
            </template>
            {{ focus == 3200 ? '是' : '否' }}
          </a-tooltip>
        </div>

        <div slot="cardnoSlot" slot-scope="cardno" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ cardno }}</span>
            </template>
            {{ encodeCardNo(cardno) }}
          </a-tooltip>
        </div>

        <div slot="phoneSlot" slot-scope="phone" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ phone }}</span>
            </template>
            {{ encodePhone(phone) }}
          </a-tooltip>
        </div>

        <div slot="timelongSlot" slot-scope="timelong" style="text-align: left">
          {{ timelong }}
        </div>

        <div slot="startdateSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ record.startdate }} - {{ record.enddate }}</span>
            </template>
            {{ record.startdate }} - {{ record.enddate }}
          </a-tooltip>
        </div>

        <div slot="deptidSlot" slot-scope="text, record" class="beyond_hiding" style="width: 100%; text-align: left">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ record.deptname }}</span>
            </template>
            {{ record.deptname }}
          </a-tooltip>
        </div>

        <span slot="operation" slot-scope="text, record">
          <template>
            <a href="javascript:;" @click="editPerson(record)">编辑</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="deletePerson(record)">删除</a>
          </template>
        </span>
      </a-table>

      <a-drawer
        :title="infoForm.isEdit ? '编辑社矫对象' : '添加社矫对象'"
        width="40%"
        :visible="editVisible"
        :body-style="{ paddingBottom: '80px' }"
        @close="editVisible = false"
        destroyOnClose
      >
        <CorrectPersonAdd
          ref="correctPersonAddRef"
          @close="editVisible = false"
          @reloadList="queryList"
          :infoForm="infoForm"
          :lawDeparts="lawDeparts"
        ></CorrectPersonAdd>
      </a-drawer>
    </template>
  </AcceptHandleHeadComponent>
</template>
<script>
import drag from '@/components/TableDrag/drag'
import { Tp_genderList } from '@/enumeration/Tp_gender'
import { Tp_crc_userList } from '@/enumeration/correction/Tp_crc_user'
import { Tp_crc_ctrlList } from '@/enumeration/correction/Tp_crc_ctrl'
import {
  pageQuery,
  importExcel,
  exportExcelTemplate,
  outputExcel,
  deletePerson,
  findAllLawDeparts,
} from '@/api/correction/crc_person.js'
import { downloadFile } from '@/utils/util'
import { FILETYPE, FILESIZE } from '@/store/mutation-types'
import { YesNoValue } from '@/enumeration/YesNo.js'
import { LableTitle } from '@/enumeration/LableTitle.js'
import AcceptHandleHeadComponent from '@/views/accept/component/AcceptHandleHeadComponent.vue'
import { Decrypt } from '@/enumeration/SM.js'

const ucolumns = [
  {
    title: '序号',
    width: 50,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' },
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 100,
    key: 'name',
    align: 'center',
    scopedSlots: { customRender: 'nameSlot' },
  },
  {
    title: '性别',
    dataIndex: 'gender',
    width: 60,
    key: 'gender',
    align: 'center',
    scopedSlots: { customRender: 'genderSlot' },
  },
  {
    title: '民族',
    dataIndex: 'nation_text',
    width: 60,
    key: 'nation_text',
    align: 'center',
  },
  {
    title: '矫正类别',
    dataIndex: 'crctype',
    width: 80,
    key: 'crctype',
    align: 'center',
    scopedSlots: { customRender: 'crctypeSlot' },
  },
  {
    title: '管控级别',
    dataIndex: 'controltype',
    width: 120,
    key: 'controltype',
    align: 'center',
    scopedSlots: { customRender: 'controltypeSlot' },
  },
  {
    title: '罪名',
    dataIndex: 'crime',
    width: 120,
    key: 'crime',
    align: 'center',
    scopedSlots: { customRender: 'crimeSlot' },
  },
  {
    title: '身份证号',
    width: 200,
    key: 'cardno',
    dataIndex: 'cardno',
    align: 'center',
    scopedSlots: { customRender: 'cardnoSlot' },
  },
  {
    title: '联系号码',
    width: 120,
    key: 'phone',
    dataIndex: 'phone',
    align: 'center',
    scopedSlots: { customRender: 'phoneSlot' },
  },
  {
    title: '矫正期限',
    width: 100,
    dataIndex: 'timelong',
    key: 'timelong',
    align: 'center',
    scopedSlots: { customRender: 'timelongSlot' },
  },
  {
    title: '矫正日期',
    width: 250,
    dataIndex: 'startdate',
    key: 'startdate',
    align: 'center',
    scopedSlots: { customRender: 'startdateSlot' },
  },
  {
    title: '所在司法所',
    width: 200,
    dataIndex: 'deptid',
    key: 'deptid',
    align: 'center',
    scopedSlots: { customRender: 'deptidSlot' },
  },
  {
    title: '是否重点人员',
    dataIndex: 'focus',
    key: 'focus',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'focusSlot' },
  },
  {
    title: '文化程度',
    dataIndex: 'culture_text',
    key: 'culture_text',
    width: 120,
    align: 'center',
  },
  {
    title: '政治面貌',
    dataIndex: 'politics_text',
    key: 'politics_text',
    width: 120,
    align: 'center',
  },
  {
    title: '国籍',
    dataIndex: 'nationality_text',
    key: 'nationality_text',
    width: 120,
    align: 'center',
  },
  {
    title: '户口类型',
    dataIndex: 'housetype_text',
    key: 'housetype_text',
    width: 120,
    align: 'center',
  },
  {
    title: '婚姻状况',
    dataIndex: 'marriage_text',
    key: 'marriage_text',
    width: 120,
    align: 'center',
  },
  {
    title: '就业就学',
    dataIndex: 'perform_text',
    key: 'perform_text',
    width: 120,
    align: 'center',
  },
  {
    title: '是否有传染史',
    dataIndex: 'isinfect_text',
    key: 'isinfect_text',
    width: 120,
    align: 'center',
  },
  {
    title: '刑种',
    dataIndex: 'penalty_text',
    key: 'penalty_text',
    width: 120,
    align: 'center',
  },
  {
    title: '决定机关类型',
    dataIndex: 'organtype_text',
    key: 'organtype_text',
    width: 120,
    align: 'center',
  },
  {
    title: '决定机关名称',
    dataIndex: 'organname',
    key: 'organname',
    width: 250,
    align: 'center',
  },
  {
    title: '报到情况',
    dataIndex: 'reportsit',
    key: 'reportsit',
    width: 150,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 180,
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'operation' },
  },
]
export default {
  data() {
    return {
      Tp_genderList: Tp_genderList,
      Tp_crc_userList: Tp_crc_userList,
      Tp_crc_ctrlList: Tp_crc_ctrlList,
      YesNoValue: YesNoValue,
      ucolumns: ucolumns,
      queryParam: {
        f_name: undefined, // 姓名
        f_gender: undefined, // 性别
        f_crctype: undefined, // 矫正类别
        f_crime: undefined, // 罪名
        f_cardnoindex: undefined, // 身份证号后四位
        f_startdate: undefined, // 矫正开始日期
        f_startdate_01: undefined, // 矫正开始结束日期
        f_enddate: undefined, // 矫正结束日期
        f_enddate_01: undefined, // 矫正结束结束日期
        f_deptid: undefined, // 司法所信息
        f_focus: undefined, // 是否重点人员
        pageNumber: 1,
        pageSize: 20,
        sort: 'startdate',
        order: 'asc',
      },
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
      },
      loading: false,
      ubordered: true, // 表格边框是否显示
      editVisible: false, // 编辑款是否展示
      infoForm: {
        id: undefined,
        name: undefined,
        cardno: undefined,
        cardnoindex: undefined,
        phone: undefined,
        nation: undefined,
        gender: undefined,
        deptid: undefined,
        crctype: undefined,
        controltype: undefined,
        crime: undefined,
        focus: undefined,
        timelong: undefined,
        startdate: undefined,
        enddate: undefined,
        avatar: undefined,
        avatarUrl: undefined,
        isEdit: false,
      }, // 编辑或新增的对象
      lawDeparts: [], // 司法所信息
      mixins: [drag],
      needDealNum: undefined,
      LableTitle: LableTitle,
      header: undefined,
      tableCountKey: 0,
      collapseKey: [], // 折叠面板key
      scroll: { x: 1000, y: 420 },
    }
  },
  components: {
    HEADERDEFINITION: () => import('@/views/customComponents/headerDefinition.vue'),
    CorrectPersonAdd: () => import('@/views/correction//manager/CorrectPersonAdd.vue'),
    AcceptHandleHeadComponent,
  },
  async created() {
    this.headerChange()
    this.queryList()
    const res = await findAllLawDeparts()
    if (res.code === 0) {
      this.lawDeparts = res.data
    } else {
      this.$message.error('查询全部司法所信息异常')
    }
  },
  watch: {
    ucolumns: {
      handler(newValue, oldVal) {
        this.headerChange()
      },
      deep: true, // 深度监听
    },
  },
  methods: {
    myEvent(e) {
      if (e) {
        this.scroll.y = this.scroll.y + e
      } else {
        this.scroll.y = 420
      }
    },
    // 加密身份证号码
    encodeCardNo(cardno) {
      return cardno ? cardno.replace(/^(.{6})(?:\w+)(.{4})$/, '$1********$2') : ''
    },
    // 加密电话号码
    encodePhone(phone) {
      return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
    },
    // 搜索
    onSearch() {
      this.queryParam.pageNumber = 1
      this.queryList()
    },
    headerChange() {
      console.log('移动后', this.ucolumns)
      this.header = {
        header: {
          cell: drag.methods.initDrag(this.ucolumns),
        },
      }
    },
    setColumns(columns) {
      console.log('重置前', this.ucolumns)
      // tableCountKey自增是为了让表格控件每次销毁强制更新
      this.tableCountKey += 1
      this.ucolumns = columns
      // this.ucolumns = columns
      console.log('重置后', this.ucolumns)
    },
    // 显示自定义表头组件
    showHeaderDef(e) {
      this.$refs.headerDefRef.f_init(e)
    },
    // 接收时间监听判断开始结束日期是否合理
    subtimeListen() {
      if (
        this.queryParam.f_startdate > this.queryParam.f_startdate_01 &&
        this.queryParam.f_startdate &&
        this.queryParam.f_startdate_01
      ) {
        this.queryParam.f_startdate = undefined
      }
      if (
        this.queryParam.f_enddate > this.queryParam.f_enddate_01 &&
        this.queryParam.f_enddate &&
        this.queryParam.f_enddate_01
      ) {
        this.queryParam.f_enddate = undefined
      }
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery() {
      // eslint-disable-next-line no-unused-expressions
      this.queryParam = {
        f_name: undefined, // 姓名
        f_gender: undefined, // 性别
        f_crctype: undefined, // 矫正类别
        f_crime: undefined, // 罪名
        f_cardno: undefined, // 身份证号
        f_startdate: undefined, // 矫正开始日期
        f_startdate_01: undefined, // 矫正开始结束日期
        f_enddate: undefined, // 矫正结束日期
        f_enddate_01: undefined, // 矫正结束结束日期
        f_deptid: undefined, // 司法所信息
        f_focus: undefined, // 是否重点人员
        pageNumber: 1,
        pageSize: 20,
        sort: 'startdate',
        order: 'asc',
      }
      this.queryList()
    },

    tableChange(upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryList()
    },

    getCpQueryParam() {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.f_startdate?.format) {
        cpQueryParam.f_startdate = this.queryParam.f_startdate.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_startdate_01?.format) {
        cpQueryParam.f_startdate_01 = this.queryParam.f_startdate_01.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_enddate?.format) {
        cpQueryParam.f_enddate = this.queryParam.f_enddate.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_enddate_01?.format) {
        cpQueryParam.f_enddate_01 = this.queryParam.f_enddate_01.format('YYYY-MM-DD') + ' 00:00:00'
      }
      return cpQueryParam
    },

    queryList() {
      const queryParam = this.getCpQueryParam()
      this.loading = true
      pageQuery(queryParam)
        .then((res) => {
          if (res.code !== 0) {
            this.$message.error('获取数据失败')
          } else {
            this.listData = res.data.records
            this.upagination.total = res.data.total
            this.upagination.current = res.data.current
            this.upagination.pageSize = res.data.size
            const personList = res.data.records
            console.log('查询结果：', personList)

            personList.forEach((e) => {
              e.cardno = Decrypt(e.cardno)
              e.name = Decrypt(e.name)
              e.phone = Decrypt(e.phone)
              // console.log(cardno, e.cardno)
            })
          }
        })
        .catch((err) => {
          this.listData = []
          console.log(err, '获取数据失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    exportTemplate() {
      const savem = this.$message.loading('正在导出中...', 0)
      exportExcelTemplate()
        .then((res) => {
          console.log('导出模板成功')
          downloadFile(res, '社区矫正人员导入模板.xls')
        })
        .catch(function () {
          console.log('导出模板失败')
        })
        .finally(() => {
          setTimeout(savem, 0)
        })
    },
    exportExcel() {
      const savem = this.$message.loading('正在导出中...', 0)
      const queryParam = this.getCpQueryParam()
      outputExcel(queryParam)
        .then((res) => {
          console.log('导出excel成功')
          downloadFile(res, '社区矫正人员信息.xls')
        })
        .catch(function () {
          console.log('导出模板失败')
        })
        .finally(() => {
          setTimeout(savem, 0)
        })
    },
    /**
     * 上传导入文件前验证文件类型
     */
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // 文件格式是否为xls,xlsx
        const isAcceptType = file.name.toLowerCase().substr(file.name.lastIndexOf('.'))
        const acceptType = '.xlsx,.xls'
        if (!(acceptType.indexOf(isAcceptType) > -1)) {
          this.$message.warning('请上传' + acceptType + '格式文件')
          return reject(false)
        }
        // 文件小于100M
        const isLtSize = file.size / 1024 / 1024 < FILESIZE
        if (!isLtSize) {
          this.$message.warning('请上传' + FILESIZE + 'MB以内的文件')
          return reject(false)
        }
        return resolve(false)
      })
    },
    /**
     * 上传附件,没有用到附件请删除
     */
    uploadFile(data) {
      console.log(data)
      importExcel(data.file).then((res) => {
        console.log('res', res)
        if (res.code !== 0) {
          this.$message.error('导入excel失败')
        } else {
          this.$message.success('导入excel成功')
          this.queryList()
        }
      })
    },
    /**
     * 删除社矫对象
     */
    deletePerson(record) {
      this.$confirm({
        title: '提醒',
        content: '是否要删除当前的社矫对象',
        okText: '是',
        cancelText: '否',
        onOk: () => {
          deletePerson({ id: record.id }).then((res) => {
            if (res.code !== 0) {
              this.$message.error('删除失败')
            } else {
              this.$message.success('删除成功')
              this.queryList()
            }
          })
        },
      })
    },
    // 编辑人员数据
    editPerson(record) {
      this.editVisible = true
      this.infoForm = JSON.parse(JSON.stringify(record))
      this.infoForm.isEdit = true
    },
    // 新增人员数据
    addPerson() {
      this.editVisible = true
      this.infoForm = {
        id: undefined,
        name: undefined,
        cardno: undefined,
        phone: undefined,
        nation: undefined,
        gender: undefined,
        deptid: undefined,
        crctype: undefined,
        controltype: undefined,
        crime: undefined,
        focus: undefined,
        timelong: undefined,
        startdate: undefined,
        enddate: undefined,
        avatar: undefined,
        avatarUrl: undefined,
        isEdit: false,
      }
      this.infoForm.isEdit = false
    },
    rowClassName(record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },
    genderLabel(val) {
      for (const key in Tp_genderList) {
        if (Tp_genderList[key].value === val) {
          return Tp_genderList[key].name
        }
      }
      return val
    },
    crctypeLabel(val) {
      for (const key in Tp_crc_userList) {
        if (Tp_crc_userList[key].value === val) {
          return Tp_crc_userList[key].name
        }
      }
      return val
    },
    controltypeLabel(val) {
      for (const key in Tp_crc_ctrlList) {
        if (Tp_crc_ctrlList[key].value === val) {
          return Tp_crc_ctrlList[key].name
        }
      }
      return val
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';

::v-deep .ant-table-thead > tr > th {
  font-weight: 600;
}
.formArea {
  margin-bottom: 30px;
}

.headerdefBox img {
  height: 20px;
  width: 20px;
}
.headerdefBox {
  // border: 1px solid red;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: end;
}

.collapseArea {
  border: none;
  .ant-collapse-item {
    border-bottom: none;
  }
  ::v-deep .ant-collapse-content {
    border-top: none;
  }
}
::v-deep .ant-collapse-header {
  background-color: #fff;
}
.collapseArea_header {
  .ant-form-item {
    margin-bottom: 0;
  }
}

.collapseArea_body {
  padding-top: 10px;
  padding: 0 20px 0 0px;
}
</style>
